/**
 * @description delete image menu
 * @author wangfupeng
 */

import { IButtonMenu, IDomEditor, DomEditor, t, SlateTransforms } from '@wangeditor/editor';
import { DavinciMedia } from '../module/custom-types';

class MediaTop implements IButtonMenu {
	readonly title = '顶部对齐';
	readonly iconSvg =
		'<svg t="1723427932553" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6206" width="200" height="200"><path d="M891.4 181.5c0-17.8-14.6-32.4-32.4-32.4H164.7c-17.8 0-32.4 14.6-32.4 32.4 0 17.8 14.6 32.4 32.4 32.4H859c17.8 0 32.4-14.6 32.4-32.4z" fill="#040000" p-id="6207"></path><path d="M546.1 675.1V310.9c0-16.5 13.5-30 30-30h240c16.5 0 30 13.5 30 30v364.2c0 16.5-13.5 30-30 30h-240c-16.5 0-30-13.5-30-30zM417.7 340.9v474.2h-180V340.9h180m30-60h-240c-16.5 0-30 13.5-30 30v534.2c0 16.5 13.5 30 30 30h240c16.5 0 30-13.5 30-30V310.9c0-16.5-13.5-30-30-30z" p-id="6208"></path></svg>';
	readonly tag = 'button';

	getValue(editor: IDomEditor): string | boolean {
		// 无需获取 val
		return '';
	}

	isActive(editor: IDomEditor): boolean {
		// 无需 active
		return false;
	}

	isDisabled(editor: IDomEditor): boolean {
		if (editor.selection == null) return true;

		const imageNode = DomEditor.getSelectedNodeByType(editor, 'davinci-media');
		if (imageNode == null) {
			// 选区未处于 image node ，则禁用
			return true;
		}
		return false;
	}

	exec(editor: IDomEditor, value: string | boolean) {
		if (this.isDisabled(editor)) return;
		const selectedImageNode = DomEditor.getSelectedNodeByType(editor, 'davinci-media');
		if (selectedImageNode == null) return;
		const nodeData = selectedImageNode as DavinciMedia;
		const style = nodeData.style;
		const newStyle = {
			...style,
			verticalAlign: 'top'
		};
		SlateTransforms.setNodes(
			editor,
			{ ...nodeData, style: newStyle },
			{
				match: n => DomEditor.checkNodeType(n, 'davinci-media')
			}
		);
	}
}

export default MediaTop;
